import { Component, OnInit, Input, Host } from '@angular/core';

import Ol_Graticule from 'ol/graticule';
import Ol_Style_Stroke from 'ol/style/stroke';
import Ol_Style_Text from 'ol/style/text';
import Ol_Style_Fill from 'ol/style/fill';

import { MapComponent } from '../map/map.component';

@Component({
  selector: 'ngx-ol-map-graticule',
  templateUrl: './map-graticule.component.html',
  styleUrls: ['./map-graticule.component.scss']
})
export class MapGraticuleComponent implements OnInit {

  _visible: boolean;
  _instance: any;

  @Input()
  set visible(value: boolean) {
    this._visible = value;
    this.setVisible(value);
  }

  get visible(): boolean {
    return this._visible;
  }

  constructor(
    @Host() protected host: MapComponent
  ) { }

  ngOnInit() {
    this._instance = new Ol_Graticule({
      strokeStyle: new Ol_Style_Stroke({
        color: 'rgba(255, 56, 56,1.0)',
        width: 2,
        lineDash: [0.5, 4]
      }),
      latLabelStyle: new Ol_Style_Text({
        fill: new Ol_Style_Fill({
          color: 'rgba(0,0,0,1)'
        }),
        stroke: new Ol_Style_Stroke({
          color: [255, 255, 255, 1],
          width: 3
        }),
        offsetX: 40
      }),
      showLabels: true,
      latLabelPosition: 0,
      lonLabelPosition: 0
    });
    this.setVisible(this.visible);
  }

  private setVisible(visible: boolean): void {
    if(this._instance && this._instance.setMap) {
      this._instance.setMap(visible ? this.host.instance : null);
    }
  }

}
